<template>
  <ul class="find_list" ref="findListRef" v-loading="flag">
    <li class="list_item" v-for="(item, index) in findList" :key="index">
      <img :src="item.url" alt="" />
      <span>{{ item.type }}</span>
    </li>
  </ul>
</template>

<script>
import {
  defineComponent,
  nextTick,
  onBeforeMount,
  onMounted,
  reactive,
  ref,
} from "vue";
import { getFindData } from "../api/pictures";
export default defineComponent({
  setup() {
    onMounted(() => {
      handleGetFind();
    });

    let flag = ref(false);

    let findList = ref(null);

    const handleGetFind = async () => {
      const { data: res } = await getFindData();
      if (res.code === 200) {
        findList.value = res.data;
        flag.value = false;
      }
    };

    return {
      flag,
      findList,
    };
  },
});
</script>
<style lang="scss" scoped>
.find_list {
  position: relative;
  margin-top: 20px;
  //   给父元素容器设置 第一种 图片宽度固定 列数可变
  //   column-width: 200px;
  //   column-gap: 20px;

  //   第二种 图片列数固定 根据屏幕大小自行改变
  column-count: 4;
  column-gap: 20px;
}
.list_item {
  margin-bottom: 20px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: #ffffff;
  transition: all 0.3s ease;
  &:hover{
    cursor: pointer;
    box-shadow:7px 10px 4px #ccc;
  }
  img {
    width: 100%;
  }

  span {
    margin-top: 10px;
    padding: 0;
    font-size: 14px;
  }
}
</style>